<template>
  <div class="evaluation">
    <!--    评价查询表单-->
    <div class="search">
      <div class="title">评论列表</div>
      <el-form :inline="true" :model="searchForm" label-width="95px" class="demo-form-inline" size="mini"
               ref="search">
        <el-form-item label='评价id' prop="eva_id">
          <el-input v-model="searchForm.eva_id"></el-input>
        </el-form-item>
        <el-form-item label='订单id' prop="or_id">
          <el-input v-model="searchForm.or_id"></el-input>
        </el-form-item>
<!--        <el-form-item label='内容' prop="eva_content">-->
<!--          <el-input v-model="searchForm.eva_content"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="首页显示" prop="eva_status">
          <el-select v-model="searchForm.eva_status" >
            <el-option label="全部" value=""></el-option>
            <el-option label="显示" :value="1"></el-option>
            <el-option label="不显示" :value="0"></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="评价时间" prop="eva_time">-->
<!--          <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.eva_time" style="width: 100%;"></el-date-picker>-->
<!--        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="resetForm('search')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--   评论列表-->
    <el-table
      :data="showTableData"
      stripe
      style="width: 100%"
      size="mini">
      <el-table-column
        type="index"
        width="50"
        label="#">
      </el-table-column>
      <el-table-column
        prop="eva_id"
        label="评价id">
      </el-table-column>
      "eva_id":"int //评价ID",
      "or_id":"int //订单ID",
      "eva_content":"string //内容",
      "eva_time":"string //评价时间",
      "eva_status":"int //是否显示"
      <el-table-column
        prop="or_id"
        label="订单id">
      </el-table-column>
      <el-table-column
        prop="eva_content"
        label="内容">
      </el-table-column>
      <el-table-column
        prop="eva_status"
        label="首页显示">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.eva_status==1">显示</el-tag>
          <el-tag type="info" v-else>不显示</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="eva_time"
        label="评价时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="toggleStatus(scope.row)">{{scope.row.eva_status==1 ? "下线" : "上线"}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--      分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>

<script>
import {getEvaByKey,updateEvaStatus} from '@/network/portal/evalutation';
export default {
  name: "Evaluation",
  computed:{
    total(){ //总条数
      return this.tableData.length;
    }
  },
  created(){
    this.getEvaluationsFromServe();
  },

  data(){
    return{
      currentPage: 1,  //当前页面
      pageSize:5,  //页面条数，默认为10条
      searchForm:{   //查询 “评论” 表单
        eva_id:'', //评价id
        or_id: '', //订单id
        // eva_content:'',  //内容
        // eva_time:'',  //评价时间(需要转换成string类型)
        eva_status:'',//是否显示首页
      },
      showTableData:[],  //真正展示的列表
      tableData:[], //从服务器中获取的数据
    }
  },
  methods:{
    getEvaluationsFromServe(){  //从服务器中获取评论
      this.currentPage = 1;
      getEvaByKey(this.searchForm).then(res=>{
        this.tableData = res.data;
        this.getTableData();
      })
    },
    toggleStatus(evaluation){
      updateEvaStatus(evaluation.eva_id).then(res=>{
        if(res.data.status==200){
          evaluation.eva_status = evaluation.eva_status==1 ? 0 : 1;
          if(evaluation.eva_status==1){
            this.$message.success(`评论${evaluation.eva_id}上线成功！`);
          }
          else{
            this.$message.success(`评论${evaluation.eva_id}下线成功！`);
          }
        }else{
          this.$message.error(`评论${evaluation.eva_id}状态修改失败！`);
        }
      })
    },
    resetForm(formName){    //重置查询表单
      this.$refs[formName].resetFields();
      this.getEvaluationsFromServe();
    },
    onSubmit(){  //查询
      this.getEvaluationsFromServe();
    },
    handleSizeChange(val){  //每页条数变化
      this.pageSize =val;
      this.getTableData();
    },
    handleCurrentChange(val){  //当前页发生改变
      this.currentPage = val;
      this.getTableData();
    },
    getTableData(){  //获取数据
      let startIndex = (this.currentPage-1)*this.pageSize;
      let endIndex = startIndex+this.pageSize > this.tableData.length ? this.tableData.length : startIndex+this.pageSize;
      this.showTableData = this.tableData.slice(startIndex,endIndex);
    }
  }
}
</script>

<style scoped>
.search{
  border: 1px solid #999999;
  border-radius: 3px;
  margin-bottom: 10px;
}
.title{
  color: white;
  background-color: rgb(55,75,118);
  font-size: 12px;
  height: 25px;
  line-height: 25px;
  padding-left:8px;
  margin-bottom: 10px;
}
</style>
